<template>
  <div class="edit-menu">
    <a-modal
      :title="modifyTitles"
      width="560px"
      :visible="visibles"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="requestSpinning" tip="正在加载数据中...">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="参数名称">
            <a-input
              v-decorator="['Csmc',{
                rules: [
                  { required: true, message: '请输入参数名称', whitespace: true, trigger: 'change' }
                ]
              }]"
              autocomplete="off"
              placeholder="请输入参数名称" />
          </a-form-item>
          <a-form-item label="唯一key值">
            <a-input
              v-decorator="['ClassKey',{
                rules: [
                  { required: true, message: '请输入key值', whitespace: true, trigger: 'change' }
                ]
              }]"
              autocomplete="off"
              placeholder="请输入唯一key值" />
          </a-form-item>
          <a-form-item label="状态">
            <a-switch
              v-decorator="['Mode', { valuePropName: 'checked', initialValue: true }]"
              checked-children="启用"
              un-checked-children="停用"
            />
          </a-form-item>
          <!-- <a-form-item label="排序值">
            <a-input-number v-decorator="['PmSort', { initialValue: '' }]" :min="0" placeholder="排序值" />
          </a-form-item> -->
          <a-form-item label="备注">
            <a-textarea v-decorator="['Ms', { initialValue: '' }]" placeholder="请输入备注"></a-textarea>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { addParameters, updateParameters, getParameterInfo } from '@/api/system'
export default {
  props: {
    visibles: {
      type: Boolean,
      default: false
    },
    propsData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pid: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      confirmLoading: false,
      requestSpinning: false,
      form: this.$form.createForm(this, { name: 'parameterEdit' })
    }
  },
  computed: {
    modifyTitles: function () {
      return this.propsData.type === 'add' ? '新增参数' : '修改参数'
    }
  },
  watch: {
    propsData: function () {
      const { propsData: { type } } = this
      if (type === 'update') {
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData () {
      const { propsData: { id: ParameterID }, form: { setFieldsValue }, $message } = this
      this.requestSpinning = true
      getParameterInfo({ Id: ParameterID }).then(res => {
        this.$nextTick(function () {
          setFieldsValue({
            ClassKey: res.data.ClassKey,
            Csmc: res.data.Csmc,
            Ms: res.data.Ms,
            Mode: res.data.Mode === 0
          })
        })
      }).catch((err) => {
        $message.error(err)
      }).finally(() => {
        this.requestSpinning = false
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      validateFields((err, values) => {
        if (!err) {
          const { propsData: { type, id: Id }, pid: Fid } = this
          this.confirmLoading = true
          if (type === 'add') {
            addParameters(Object.assign({}, values, {
              Fid,
              Mode: values.Mode ? 0 : -1
            })).then(res => {
              if (res.code === 200) {
                this.$message.success('新增参数成功', 3)
                this.handleCancel()
                this.$emit('refresh')
              } else {
                this.$message.error(res.msg, 3)
              }
            }).catch((err) => {
              this.$message.error(err.message || '新增参数失败', 3)
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            updateParameters(Object.assign({}, values, {
              Id,
              Fid,
              Mode: values.Mode ? 0 : -1
            })).then(res => {
              if (res.code === 200) {
                this.$message.success('修改参数成功', 3)
                this.handleCancel()
                this.$emit('refresh')
              } else {
                this.$message.error(res.msg, 3)
              }
            }).catch((err) => {
              this.$message.error(err.message || '修改参数失败', 3)
            }).finally(() => {
              this.confirmLoading = false
            })
          }
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('update:visibles', false)
    }
  }
}
</script>
